<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上传组件验证的demo</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
<style>
    body {
        font-size: 12px;
        color: #404040;
    }

    .demo-wrapper {
        margin-top: 20px;
    }

    .btn-wrapper {
        margin-top: 10px;
    }
</style>
</head>
<body>

<article id="main">
    <h4>上传组件验证的demo</h4>
    <div class="demo-wrapper">
        <form action="test.php" id="J_Form">
            <div class="clearfix">
                <a id="J_UploaderBtn" class="uploader-button f-l"
                   data-config='{"type" : "auto",
                                 "serverConfig":{"action":"upload.php","data":{"dir":"files/"}, "dataType" : "json"},
                                 "name":"Filedata",
                                 "urlsInputName":"imageUrls"}'
                   data-auth='{
                                "require":[true,"必须至少上传一个文件！"],
                                "max":[3, "每次最多上传{max}个文件！"],
                                "maxSize":[5000, "文件大小为{size}，文件太大！"],
                                "allowRepeat":[false, "该文件已经存在！"],
                                "allowExts":[
                                    {"desc":"JPG,JPEG,PNG,GIF,BMP", "ext":"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                                    "不支持{ext}格式的文件上传！"
                                ]
                   }'
                   href="#uploaderFile()">
                    选择要上传的图片
                </a>
                <p class="f-l">只允许上传jpg、gif、png、bmp格式，最大允许大小为1.0MB</p>
            </div>
            <div id="J_UploaderMsg" class="valid-under uploader-auth-msg" style="height: 24px;display: none;" id="msgbox"><p class="estate error"><span class="label">此项为必填项。</span></p></div>
            <!-- 图片路径隐藏域 -->
            <input type="hidden" value="" id="J_ImageUrls" name="imageUrls" data-valid="{messagebox:'#J_UploaderMsg','uploader-max' : [1]}">
            <!-- 队列 -->
            <ul id="J_UploaderQueue">

            </ul>
            <input id="J_Submit" value="提交表单" type="button">
            <p>如果不存在上传文件或者超过上传允许数，出现弹出框。</p>
        </form>
    </div>
    <h4>验证配置</h4>
    <pre class='brush: xml;'>
        <a id="J_UploaderBtn" class="uploader-button"
           data-config='{}'
           data-auth='{
                        "require":[true,"必须至少上传一个文件！"],
                        "max":[3, "每次最多上传{max}个文件！"],
                        "maxSize":[1000, "文件大小为{size}，文件太大！"],
                        "allowRepeat":[false, "该文件已经存在！"],
                        "allowExts":[
                            {"desc":"JPG,JPEG,PNG,GIF,BMP", "ext":"*.jpg;*.jpeg;*.png;*.gif;*.bmp"},
                            "不支持{ext}格式的文件上传！"
                        ]
           }'
           href="#uploaderFile()">
            选择要上传的图片
        </a>
    </pre>
    <p>当按钮上带有data-auth属性，表明开启上传验证，在伪属性上写上验证规则。</p>
    <p>留意：每个验证规则值都是一个数组，数组第一个值为规则控制值，第二个值为错误消息。</p>
    <h5>关于上传格式验证</h5>
    <p>ajax和flash在上传格式验证方式上有差异，flash是在选择文件时选择框提前过滤格式，而ajax和iframe是在选择完文件后，通过正则验证格式。</p>
    <h5>关于文件大小验证</h5>
    <p>留意：iframe方式无法获取文件大小，所以无法验证，务必在服务器端增加一层文件验证。</p>
    <h4>外部验证上传数、是否必须上传</h4>
    <p>是否必须上传，默认组件是不验证的，所以需要手动触发，可以使用<b>testAll()</b>或<b>testRequire()</b>方法。</p>
    <pre class='brush: js;'>
        var isPass = auth.testAll();
        if (isPass) {
            $("#J_Form").fire('submit');
        }
    </pre>
    <h4>error事件</h4>
    <p>当验证不通过时，都会触发一个error事件。</p>
    <pre class='brush: js;'>
        auth.on('error', function (ev) {
            var rule = ev.rule, msg = ev.msg;
            if (rule == 'require' || rule == 'max') {
                alert(msg);
            }
        });
    </pre>

    <script>
        var S = KISSY, $ = S.Node.all;
        S.config({
            packages:[
                {
                    name:"gallery",
                    tag:"20120319",
                     path:"../../../../../../",
                    //path:"http://a.tbcdn.cn/s/kissy/",
                    charset:"utf-8"
                }
            ]
        });
        KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
            var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
            ru.on("init", function (ev) {
                var uploader = ev.uploader,
                        auth = uploader.get('auth');
                auth.on('error', function (ev) {
                    var rule = ev.rule, msg = ev.msg;
                    if (rule == 'require' || rule == 'max') {
                        alert(msg);
                    }
                });
                $('#J_Submit').on('click', function (ev) {
                    var isPass = auth.testAll();
                    if (isPass) {
                        $("#J_Form").fire('submit');
                    }
                })
            })
        })
    </script>
</article>
<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>